<template>
  <div class="app-container">

    <list-page-container>

      <template slot="query">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="90px">
          <el-form-item label="农户姓名" prop="name">
            <el-input
                v-model="queryParams.name"
                placeholder="请输入农户姓名"
                clearable
                style="width: 240px"
                @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </template>

      <template slot="handel">
        <el-row class="handle-container" :gutter="10">
          <el-col :span="1.5">
            <el-button
                type="primary"
                plain
                icon="el-icon-plus"
                size="mini"
                @click="handleAdd"
            >新增
            </el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
                type="danger"
                plain
                icon="el-icon-delete"
                size="mini"
                :disabled="multiple"
                @click="handleDelete"
            >删除
            </el-button>
          </el-col>
<!--          <el-col :span="1.5">-->
<!--            <el-button-->
<!--                type="warning"-->
<!--                plain-->
<!--                icon="el-icon-download"-->
<!--                size="mini"-->
<!--                @click="handleExport"-->
<!--            >导出-->
<!--            </el-button>-->
<!--          </el-col>-->
        </el-row>
      </template>

      <template slot="table">
        <el-table v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" align="center"/>
          <el-table-column label="姓名" align="center" prop="name"/>
          <el-table-column width="200" label="身份证号" align="center" prop="idCard"/>
          <el-table-column width="200" label="农户银行卡" align="center" prop="peasantHouseholdBankCard"/>
          <el-table-column label="采集单号" align="center" prop="collectionOrderNumber"/>
          <el-table-column label="创建时间" align="center" prop="createTime"/>
          <el-table-column label="修改时间" align="center" prop="updateTime"/>
          <el-table-column label="创建人" align="center" prop="createBy"/>
          <el-table-column label="修改人" align="center" prop="updateBy"/>
          <el-table-column label="是否删除"
                           align="center"
                           prop="deleted"
                           :formatter="deletedFormat"
          />
          <el-table-column width="300" label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                  @click="handleUpdate(scope.row)"
              >修改
              </el-button>
              <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-delete"
                  @click="handleDelete(scope.row)"
              >删除
              </el-button>
              <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-view"
                  @click="fieldInfo(scope.row)"
              >地块信息
              </el-button>
              <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-view"
                  @click="historyInfo(scope.row)"
              >历史保单信息
              </el-button>
              <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-view"
                  @click="gatherInfo(scope.row)"
              >采集信息
              </el-button>

            </template>
          </el-table-column>
        </el-table>
      </template>

      <template slot="pageDisplay">
        <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
        />
      </template>
    </list-page-container>


    <el-dialog :title="title" :visible.sync="open" width="530px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">

        <el-form-item label="姓名" prop="name">
          <el-input v-model="form.name" placeholder="请输入姓名"/>
        </el-form-item>
        <el-form-item label="身份证号" prop="idCard">
          <el-input v-model="form.idCard" placeholder="请输入农户身份证号"/>
        </el-form-item>
        <el-form-item label="农户银行卡" prop="peasantHouseholdBankCard">
          <el-input v-model="form.peasantHouseholdBankCard" placeholder="请输入农户银行卡号"/>
        </el-form-item>
        <el-form-item label="农户开户行" prop="peasantHouseholdOpeningBank">
          <el-input v-model="form.peasantHouseholdOpeningBank" placeholder="请输入用户农户开户行号"/>
        </el-form-item>
        <el-form-item label="联系方式" prop="contactInformation">
          <el-input v-model="form.contactInformation" placeholder="请输入农户联系方式"/>
        </el-form-item>
        <el-form-item label="采集单号" prop="collectionOrderNumber">
          <el-input v-model="form.collectionOrderNumber" placeholder="请输入农户采集单号"/>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog
        :title="dialogTitle"
        :visible.sync="dialogVisible"
        width="80%"
        @close="closeDialogTable">
      <div>
<!--        <el-empty description="暂无数据"></el-empty>-->
        <el-table  :data="dialogTableData">
          <el-table-column
              v-for="item in dialogTableColumn"
              :key="item.prop"
              :label="item.label"
              align="center"
              :prop="item.prop"
          />
          <el-table-column width="200"
                           v-if="dialogTitle=='地块信息'"
                           label="操作"
                           align="center"
                           class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-map-location"
                  @click="jumpChitInfoLook(scope.row)"
              >地块位置
              </el-button>
            </template>
          </el-table-column>
        </el-table>

      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>


  </div>
</template>

<script>
import {
  addSysUser,
  delSysUser, getCurrentUserAllowUserType,
  getSysUserInfoById,
  getSysUserList,
  resetPwd,
  updateSysUser
} from "@/api/system/sysUser";
import {
  getFarmersList,
  addFarmerInfo,
  updateFarmerInfo,
  delFarmerInfo, getFarmerInfoById,
  queryPlot,
  queryHistoryOrder,
  queryAcquisition,

} from "@/api/farmersFile";
import {listDept} from "@/api/system/dept";
import Treeselect from "@riophae/vue-treeselect";
import {OPERATE_TYPE} from "@/constantData";

export default {
  dicts: ['enum_user_state', 'enum_user_type'],
  components:{Treeselect},
  name: "farmersInfo",
  data() {
    return {
      //条目id
      itemId: null,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: null,
      },
      dataList: [],
      total: 0,
      loading: false,
      multiple: true,
      open: false,
      open2: false,
      // 弹出层标题
      title: "",
      form: {},
      baseForm: {
        name: null,
        idCard: null,
        peasantHouseholdBankCard: null,
        peasantHouseholdOpeningBank:null,
        contactInformation:null,
        collectionOrderNumber:null,
      },
      // 表单校验
      rules: {
        contactInformation: [
          {required: true, message: "用户手机号不能为空", trigger: "blur"}
        ],
        name: [
          {required: true, message: "用户姓名不能为空", trigger: "blur"}
        ],
        idCard: [
          {required: true, message: "用户身份证号不能为空", trigger: "blur"}
        ],
        peasantHouseholdBankCard: [
          {required: true, message: "银行卡号不能为空", trigger: "blur"}
        ],
        peasantHouseholdOpeningBank: [
          {required: true, message: "开户行号不能为空", trigger: "blur"}
        ],
        collectionOrderNumber: [
          {required: true, message: "采集单号不能为空", trigger: "blur"}
        ],
      },

      // 选中数组
      ids: [],
      deptOptions:[],
      hanType:'',
      OPERATE_TYPE,

      //控制弹框表格开关
      dialogVisible: false,
      dialogTitle:'信息', //弹框title
      dialogTableData:[], //弹框表格数据
      dialogTableColumn:[],//弹框表格表头数据
    }
  },
  methods: {
    jumpChitInfoLook(row){
      let id = row.orderBaseDetailVo.id;
      this.$router.push({name: 'chitInformationLook', query: {chitId:id,jumpSign:'farmersFile'}})
    },
    //以下为操作弹窗
    openDialogTable(){
      this.dialogVisible = true;
    },
    closeDialogTable(){
      this.dialogVisible = false;
    },
    fieldInfo(row){
      this.loading = true;
      this.dialogTitle='地块信息'
      this.dialogTableColumn=[
        {
          label:'地块名称',
          prop:'dkmc',
        },
        {
          label:'地块序号',
          prop:'dkxh',
        },
        {
          label:'地块类型',
          prop:'dklx',
        },
        {
          label:'地块种植数量',
          prop:'dkzzsl',
        },
        {
          label:'有无灌溉条件',
          prop:'ywggtj',
        },
      ]
      queryPlot(row.id).then(res => {
        if(res && res.code == 200){
          if(res.data && Array.isArray(res.data)){
            this.dialogTableData = res.data;
            this.openDialogTable();
            this.loading = false;
          }
        }
      })

    },
    historyInfo(row){
      this.loading = true;
      this.dialogTitle='历史保单信息'
      this.dialogTableColumn=[
        {
          label:'保单年份',
          prop:'orderYear',
        },
        {
          label:'投保单号',
          prop:'tbdh',
        },
        {
          label:'险种名称',
          prop:'xzmc',
        },
        {
          label:'投保人',
          prop:'tbr',
        },
      ]
      queryHistoryOrder(row.id).then(res => {
        if(res && res.code == 200){
          if(res.data && Array.isArray(res.data)){
            this.dialogTableData = res.data;
            this.openDialogTable();
            this.loading = false;
          }
        }
      })

    },
    gatherInfo(row){
      this.loading = true;
      this.dialogTitle='采集信息'
      this.dialogTableColumn=[
        {
          label:'姓名',
          prop:'personName',
        },
        {
          label:'投保面积(平方米)',
          prop:'area',
        },
        {
          label:'业务人员姓名',
          prop:'businessPersonName',
        },
        {
          label:'联系方式',
          prop:'contact',
        },
        {
          label:'身份证号码',
          prop:'idCardNum',
        },
        {
          label:'经度',
          prop:'longitude',
        },
        {
          label:'纬度',
          prop:'latitude',
        },
        {
          label:'地块面积',
          prop:'massif',
        },
        {
          label:'种植作物类型',
          prop:'plantType',
        },
        {
          label:'投保金额',
          prop:'money',
        },
      ]
      queryAcquisition(row.id).then(res => {
        if(res && res.code == 200){
          if(res.data && Array.isArray(res.data)){
            this.dialogTableData = res.data;
            this.openDialogTable();
            this.loading = false;
          }
        }
      })

    },

    //映射是否删除
    deletedFormat(row){

        if(row.deleted === '1'){
          return '是';
        }else if(row.deleted === '0'){
          return '否'
        }else{
          return null
        }

    },


    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const dictId = row.id
      this.hanType = OPERATE_TYPE.UPDATE
      getFarmerInfoById({id:dictId}).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改农户信息";
      });
    },
    /** 导出按钮操作 */
    handleExport() {

    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.multiple = !selection.length
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const dictIds = row.id || this.ids.join(',');
      this.$modal.confirm('是否确认删除当前数据项？').then(function () {
        return delFarmerInfo({ids:dictIds});
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },

    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateFarmerInfo(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addFarmerInfo(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },

    // 表单重置
    reset() {
      this.form = _.cloneDeep(this.baseForm);
      this.resetForm("form");
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.hanType = OPERATE_TYPE.ADD
      this.open = true;
      this.title = "添加农户";
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    getList() {
      this.loading = true;
      getFarmersList(this.queryParams).then(response => {
            this.dataList = response.rows;
            this.total = response.total;
            this.loading = false;
          }
      );
    },
    getDeptList(){
      let owner = this
      listDept().then(response => {
        owner.deptOptions = this.handleTree(response.data, "orgCode", 'parentCode');
      });
    }
  },
  created() {
    this.getList();
    this.getDeptList()
  },
}
</script>

<style scoped>

</style>
